<script setup>
	import { computed, onMounted, ref } from 'vue';
	import { useUserStore } from '@/store/userInfo';
	import { hidePhoneNumber } from '@/untils/hidePhone.js'
	const userStore = useUserStore( )
	// 获取顶部自定义导航栏
	const top = ref( uni.getSystemInfoSync( ).safeAreaInsets.top + 2 )
	// 使用微信 API 获取胶囊信息
	const menuButtonInfo = wx.getMenuButtonBoundingClientRect( )
	console.log( menuButtonInfo )
	// 判断登录
	const isLoginTest = computed( ( ) => {
		return userStore.userInfo.uid ? true : false
	} )

	// 点击登录
	const login = ( ) => {
		console.log( '点击登录' )
		uni.reLaunch( {
			url: "/pages/login/login"
		} )
	}
</script>

<template>
	<view class="my">
		<view class="headBox" :style="{paddingTop: top + 'px' || 46 + 'px' }">
			<!-- 占位 -->
			<view class="zhanwei" :style="{height: menuButtonInfo.height + 'px' || 34 + 'px'}">
				1
			</view>
			<!-- 用户信息 -->
			<view class="userInfo">
				<!-- 头像 -->
				<view class="avatar">
					<image
						src="https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/defaultAvatar.png"
						mode="aspectFill"></image>
				</view>
				<!-- 文字信息 -->
				<view class="value" v-if="isLoginTest">
					<view class="randomName">
						{{userStore.userInfo.username}}
					</view>
					<view class="nickname">
						手机号:{{hidePhoneNumber(userStore.userInfo.mobile)}}
					</view>
				</view>
				<view class="login" v-else @tap="login">
					点击登录
				</view>
			</view>
			<!-- 订单状态组件-->
			<order-type></order-type>
			<!-- 常用功能 -->
			<gong-neng></gong-neng>
		</view>
	</view>
</template>


<style lang="scss" scoped>
	.my {
		@include pageStyle;

		.headBox {
			height: 400rpx;
			background: url('https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/bc.png') no-repeat center center / cover;

			/*占位*/
			.zhanwei {
				opacity: 0;
			}

			/*用户信息*/
			.userInfo {
				display: flex;
				align-items: center;
				padding: 40rpx;

				/*头像*/
				.avatar {
					margin-right: 16rpx;
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border-radius: 50%;
				}

				/*用户信息*/
				.value {
					.randomName {
						margin-bottom: 8rpx;
						font-weight: bold;
						color: $text-font-color-2;
					}

					.nickname {
						font-size: 24rpx;
						color: $text-font-color-3;
					}
				}
			}

			/*订单状态组件*/
			/*常用功能组件*/
		}

	}
</style>